<template>
    <div class="h_100">
        <div v-if="checked" class="h_100 position_r margin_0_auto">
            <div class="login">
                <div class="left-side fl">
                    <div class="login-module">
                        <div class="hy-font">欢迎</div>
                        <ElForm class="login-form" label-width="100px" label-position="top" disabled>
                            <div class="login-font mt30">账号</div>
                            <ElFormItem label="">
                                <ElInput></ElInput>
                            </ElFormItem>
                            <div class="login-font">密码</div>
                            <ElFormItem label="">
                                <ElInput autocomplete="off"></ElInput>
                            </ElFormItem>
                            <div class="clearfix login-psw">
                                <div class="fl forget-paw">忘记密码</div>
                                <div class="fr register-business">注册运营</div>
                            </div>
                        </ElForm>
                        <div class="mt20">
                            <ElButton class="login-button" :class="`${checked}_theme`" size="large">登录</ElButton>
                        </div>
                    </div>
                </div>
                <div class="right-side fr clearfix">
                    <img class="right-side-img" src="../../assets/image/租户.png" alt="" />
                </div>
            </div>
            <div class="position_a bottom_box">
                <div class="w320 fl">
                    <ElButton class="but_cancel but_confirms_theme" size="large" @click="confirmsTheme">确定</ElButton>
                </div>
                <div class="w320 fr">
                    <ElButton class="but_cancel" :class="`${checked}_theme`" size="large" @click="goBack">
                        取消
                    </ElButton>
                </div>
            </div>
        </div>
        <div v-else class="change_box">
            <div class="text_font">选择主题色</div>
            <div class="clearfix mt30">
                <div @click="changeTheme('waterfall')" class="fl theme_img">
                    <div class="theme_box theme_box_waterfall"></div>
                    <div class="theme_waterfall">水瀑_WATERFALL</div>
                </div>
                <div @click="changeTheme('illuminating')" class="fl theme_img">
                    <div class="theme_box theme_box_illuminating"></div>
                    <div class="theme_illuminating">明黄_ILLUMINATING</div>
                </div>
                <div @click="changeTheme('black')" class="fl theme_img">
                    <div class="theme_box theme_box_charcoal"></div>
                    <div class="theme_charcoal">炭黑_CHARCOAL</div>
                </div>
                <div @click="changeTheme('fieryred')" class="fl theme_img">
                    <div class="theme_box theme_box_fieryred"></div>
                    <div class="theme_fieryred">火红_FIERY RED</div>
                </div>
            </div>
            <div class="mt150">
                <div class="w320 margin_0_auto">
                    <ElButton class="but_cancel" size="large" @click="goBack">取消</ElButton>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { createTenantStyleCustomization } from '@/api/api.query.util';

const checked = ref('');
const router = useRouter();

function changeTheme(data: any) {
    checked.value = data;
}
function goBack() {
    router.push({ name: '/home/service-management' });
}
function confirmsTheme() {
    const themes = {
        waterfall: '1',
        black: '2',
        fieryred: '3',
        illuminating: '4',
    };
    createTenantStyleCustomization({
        method: 'post',
        data: {
            styleFlag: themes[checked.value],
        },
    }).then((res) => {
        document.body.removeAttribute('class');
        document.getElementsByTagName('body')[0].className = `${checked.value}_theme`;
        goBack();
    });
}
</script>
<style lang="scss" scoped>
.text_font {
    font-size: 26px;
    font-weight: normal;
    color: #333333;
}
.bottom_box {
    top: 680px;
    left: calc(50% - 350px);
    transform: translateY(-50%);
    width: 700px;
}
.change_box {
    width: 1280px;
    margin: 150px auto;
}
.but_confirms_theme {
    background-color: #333333;
    color: #ffffff;
    border-color: #333333;
}
.position_confirms {
    top: 645px;
    left: 380px;
}
.position_canclels {
    top: 645px;
    left: 740px;
}
.but_cancel {
    width: 320px;
    border-radius: 4px;
}

.theme_box_waterfall {
    background: #3ab0a2 url(../../assets/image/waterfall@2x.png) no-repeat;
}
.theme_box_illuminating {
    background: #f5df4d url(../../assets/image/illuminating@2x.png) no-repeat;
}
.theme_box_charcoal {
    background: #333333 url(../../assets/image/charcoal@2x.png) no-repeat;
}
.theme_box_fieryred {
    background: #c7000b url(../../assets/image/fieryred@2x.png) no-repeat;
}

.theme_waterfall {
    height: 35px;
    background-color: #3ab0a2;
    width: 100%;
    line-height: 35px;
    text-align: center;
    color: #ffffff;
}
.theme_illuminating {
    height: 135px;
    background-color: #f5df4d;
    width: 100%;
    line-height: 35px;
    text-align: center;
    color: #333333;
}
.theme_charcoal {
    height: 35px;
    background-color: #333333;
    width: 100%;
    line-height: 35px;
    text-align: center;
    color: #ffffff;
}
.theme_fieryred {
    height: 35px;
    background-color: #c7000b;
    width: 100%;
    line-height: 35px;
    text-align: center;
    color: #ffffff;
}
.fieryred {
    background-color: #c7000b;
}

.theme_box {
    background-size: 100%;
    height: 240px;
    transition-duration: 0.2s;
}
.theme_img {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: hidden;
    height: 275px;
    width: 320px;
    transition-duration: 0.2s;
}
.theme_img:hover {
    transform: scale(1.0125);
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
    .theme_box {
        filter: brightness(0.6);
    }
}
.login {
    width: 100%;
    height: 100%;
    .left-side {
        width: 50%;
        height: 100%;
        position: relative;
        .login-module {
            position: absolute;
            top: 27%;
            left: 27%;
            width: 46%;
            margin: 0 auto;
            .hy-font {
                font-size: 32px;
                color: #333333;
                line-height: 32px;
            }
            .login-font {
                font-size: 14px;
                line-height: 14px;
                display: inline-block;
                margin-bottom: 5px;
            }
            .login-input {
                height: 5%;
                width: 100%;
                display: block;
            }
            .login-button {
                background-color: var(--prmary-color);
                width: 100%;
                color: #ffffff;
                cursor: default;
            }
        }
    }
    .right-side {
        width: 50%;
        .right-side-img {
            width: 100%;
        }
    }
}

/deep/ .el-input.is-disabled .el-input__inner {
    cursor: default;
}
.login-psw {
    color: #606266;
    font-size: 14px;
}
</style>
